<template>
  <div class="goods-add">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品添加</span>
      </div>
      <el-form ref="formRef" :model="goodsForm" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="goodsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="goodsForm.category" placeholder="请选择商品分类">
            <el-option
              v-for="item in category"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number v-model="goodsForm.price" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            :action="`${API}/goods/goods_img_upload`"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlesuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="goodsForm.imgUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="goodsForm.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { goodsAdd, goodsCategories } from "@/api/goods";
export default {
  data() {
    return {
      API: "http://sell.h5.itsource.cn:8087",
      goodsForm: {
        name: "",
        category: "",
        goodsDesc: "",
        price: "",
        imgUrl: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      category: [],
    };
  },
  methods: {
    async onSubmit() {
      // console.log("submit!");
      if (
        this.goodsForm.name &&
        this.goodsForm.imgUrl &&
        this.goodsForm.goodsDesc
      ) {
        let res = await goodsAdd(this.goodsForm);
        console.log(res);
        let{code}=res.data
        if(code==0){
          this.$router.push('/goods/goods-list')
        }
      } else {
        this.$message.error("请填写完整");
      }
    },
    //上传图片成功
    handlesuccess(file) {
      console.log(file);
      this.goodsForm.imgUrl = file.imgUrl;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  //查看启用的分类名称
  async created() {
    let res = await goodsCategories();
    // console.log(res);
    let { data } = res;
    this.category = data;
    console.log(this.category);
  },
};
</script>

<style lang="scss" scoped>
.goods-add {
  padding: 0 20px;
  margin-top: 15px;
}
.el-button--primary {
  background-color: #d99bac;
  border: 0;
}
.el-input-number__decrease {
  height: 40px;
}
</style>